<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    v-show="orgType==2"
                    :disabled="!addState"
                    @click="opAdd"
                >新增</el-button>
            </div>
            <div class="right-panel">
                <el-button :icon="Search" type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px;margin-right: 20px;">
                    <el-row type="flex" style="flex-wrap:wrap">
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="交易账户" label-width="80px" style="width: 100%;">
                                <el-input
                                    placeholder="---请输入交易账户---"
                                    v-model="queryList.electronicAccount"
                                    style="width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="账户编码" label-width="80px" style="width: 100%;">
                                <el-input
                                    placeholder="---请输入门店编码---"
                                    v-model="queryList.storeCode"
                                    style="width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="账户名称" label-width="80px" style="width: 100%;">
                                <el-input
                                    placeholder="---请输入门店名称---"
                                    v-model="queryList.storeName"
                                    style="width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="交易类型" label-width="80px" style="width: 100%;">
                                <el-select
                                    placeholder="---请选择交易类型---"
                                    v-model="queryList.tradeType"
                                    style="width: 100%;"
                                >
                                    <el-option label="---请选择---" value />
                                    <el-option
                                        v-for="item in optionsTradeType"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="交易时间" label-width="80px" style="width: 100%;">
                                <el-date-picker
                                    style="width: 100%;"
                                    v-model="queryList.crDates"
                                    type="datetimerange"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    range-separator="-"
                                    unlink-panels="true"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    :default-time="defaultTime"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="操作人" label-width="80px" style="width: 100%;">
                                <el-input
                                    placeholder="---请输入名称---"
                                    v-model="queryList.createName"
                                    style="width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>  
                   
                   
                   
                   
                  
                   
                </el-form>
            </vab-query-form-top-panel>
            
        </el-foot>
        <el-main class="nopadding">
            <el-container>
                <el-header>
                    <el-row style="width: 100%;">
                        <el-col :span="4">账户总额：{{ summaryData.totalBalanceAmount }}</el-col>
                        <el-col :span="4">累计退货：{{ summaryData.totalRefundAmount }}</el-col>
                        <el-col :span="4">累计空瓶货款：{{ summaryData.totalEmptyLoanAmount }}</el-col>
                        <el-col :span="4">累计返利：{{ summaryData.totalRebateAmount }}</el-col>
                        <el-col :span="4">累计抵扣货款消费：{{ summaryData.totalDeductionAmount }}</el-col>
                    </el-row>
                </el-header>
                <el-main class="nopadding">
                    <scTable
                        ref="mytable"
                        :queryType="'tradeInfo/pages'"
                        :data="listData"
                        :queryList="queryList"
                        :column="columnList"
                        :orderList="OrderList"
                        :sort-orders="['ascending', 'descending']"
                        @selection-change="selectionChange"
                        row-key="TradeId"
                        key="TradeId"
                        stripe
                    >
                        <el-table-column prop="createTime" label="交易时间" width="200" sortable></el-table-column>
                        <el-table-column prop="electronicAccount" label="交易账户" width="200" sortable></el-table-column>
                        <el-table-column prop="orgCode" label="账户编码" width="120" sortable></el-table-column>
                        <el-table-column prop="orgName" label="账户名称" width="260" sortable></el-table-column>
                        <el-table-column prop="orgTypeDesc" label="账户类型" width="120" sortable></el-table-column>
                        <el-table-column prop="tradeTypeDesc" label="交易类型" width="120" sortable></el-table-column>
                        <el-table-column prop="tradeAmount" label="交易金额" width="150" sortable></el-table-column>
                        <el-table-column prop="createName" label="操作人" width="100" sortable></el-table-column>
                        <el-table-column prop="tradeOrderCode" label="关联单号" width="200" sortable>
                            <template #default="scope">
                                <span style="color: #318cf8;" @click="opOrderDetail(scope.row)">{{ scope.row.tradeOrderCode}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="remarks"
                            label="备注"
                            width="200"
                            sortable
                            show-overflow-tooltip
                        ></el-table-column>
                    </scTable>
                </el-main>
               
            </el-container>
        </el-main>
    </el-container>

    <save-dialog
        v-if="dialogSave"
        ref="saveDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogSave = false"
    ></save-dialog>
    <detail-dialog
        v-if="dialogDetail"
        ref="detailDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogDetail = false"
    ></detail-dialog>

    <after-detail-dialog
        v-if="dialogAfterDetail"
        ref="afterDetailDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogDetail = false"
    ></after-detail-dialog>

    <template>
        <el-dialog
            v-model="auditState"
            title="审核备注"
            :width="500"
            :center="true"
            append-to-body
            style="height: 480px"
        >
            <el-row>
                <el-input v-model="auditRemarks" type="textarea" :rows="5" />
            </el-row>
            <template #footer>
                <el-button @click="auditState = false">取 消</el-button>
                <el-button type="primary" :loading="isSaveing" @click="setState">确定</el-button>
            </template>
        </el-dialog>
    </template>
</template>

<script>
import saveDialog from "./save";
//import afterDetailDialog from "../afterOrder/detail.vue";
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "storeTrade",
    components: {
        saveDialog,
        //afterDetailDialog,
        publicjs,
    },
    data() {
        return {
            dialogAfterDetail: false,
            dialogSave: false,
            //审核状态
            auditState: false,
            showCondition: false,
            selectionRows: [],
            pkList: ["TradeId"],
            columnList: [],
            OrderList: { StoreId: "Asc" },
            queryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            orgCodeList: "",
            orgNameList: "",
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsTradeType: [],
            orgType: 1,

            //汇总信息
            summaryData: {
                totalBalanceAmount: 0,
                totalRefundAmount: 0,
                totalRebateAmount: 0,
                totalEmptyLoanAmount: 0,
                totalDeductionAmount: 0,
            },
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {
        //添加
        opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Add");
            });
        },
        //编辑
        opEdit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Edit").setData(row);
            });
        },
        //查看
        opShow(row) {
            this.dialogDetail = true;
            this.$nextTick(() => {
                this.$refs.detailDialog.setData(row);
                this.$refs.detailDialog.open("Show");
            });
        },
        opOrderDetail(row) {
            switch (row.tradeType) {
                case 1:
                    this.dialogAfterDetail = true;
                    this.$nextTick(() => {
                        this.$refs.afterDetailDialog.setData({afterOrderId:row.tradeOrderId});
                        this.$refs.afterDetailDialog.open("Show");
                    });
                    break;
            }
        },

        //删除
        async opDelete(row) {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "after-order/delete",
                    { afterOrderId: row.afterOrderId }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //批量删除
        async opBatchDelete() {
            // eslint-disable-next-line no-debugger
            //debugger;
            this.$confirm(
                `确定删除选中的 ${this.selectionRows.length} 项吗？`,
                "提示",
                {
                    type: "warning",
                }
            )
                .then(async () => {
                    const storeIds = this.selectionRows.map((p) => p.storeId);
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                "store/delete",
                                { storeIds: [...storeIds] }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$refs.mytable.getData();
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                        }
                    } catch (error) {
                        this.loading = false;
                        return false;
                    }
                })
                .catch(() => {});
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
            await this.getSummaryData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["StoreTradeType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsTradeType = returnValue.response.find(
                        (p) => p.code == "StoreTradeType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //获取汇总信息
        async getSummaryData() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "tradeInfo/summary",
                    this.queryList
                );
                this.summaryData = returnValue;
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        await this.initOptions();
        await this.opBindData();
        await this.getSummaryData();
    },
};
</script>
<style>
/* /deep/ 为深度操作符，可以穿透到子组件 */
::v-deep .el-table {
    display: flex;
    flex-direction: column;
}
::v-deep .el-table__body-wrapper {
    order: 1;
}
</style>